<ui-component name="miniform" path="common.form" config="if:CLASS;title:@(Change credentials);icon:ti ti-key;autofocus:true;submit:?/submit;width:400" class="hidden" plugin="CLASS">
	<div class="padding">

		<div class="message message-alert" style="margin-bottom:20px"><i class="ti ti-question-circle"></i>@(If you change credentials, all open sessions will be closed except yours.)</div>

		<ui-component name="input" path="?.login" config="required:1" class="m"><b>@(User name)</b></ui-component>

		<hr />
		<div class="help m">@(We recommend using various chars like numbers, special characters, and lower/upper chars.)</div>

		<ui-component name="input" path="?.password" config="required:1;placeholder:@(Enter a new password);type:password;$delay:700" default="''" class="m">@(Password)</ui-component>
		<ui-component name="input" path="?.passwordreply" config="required:1;placeholder:@(Reply a new password);type:password;$delay:700" default="''">@(Password reply)</ui-component>

		<ui-bind path="?" config="show:value.password && value.passwordreply && value.password !== value.passwordreply" class="hidden">
			<div class="message message-alert m">
				<i class="ti ti-exclamation-triangle mr5"></i>@(Passwords do not match.)
			</div>
		</ui-bind>

	</div>
	<nav>
		<ui-component name="validate" path="?" config="if:value.password===value.passwordreply">
			<button name="submit" disabled><i class="ti ti-check-circle"></i>@(SUBMIT)</button>
			<button name="cancel">@(Cancel)</button>
		</ui-component>
	</nav>
</ui-component>

<script>

	PLUGIN(function(exports) {

		exports.submit = function(hide) {
			var model = exports.form;
			exports.ajax('POST @{#}/fapi/password/ @showloading ERROR', model, function() {
				EXEC('-message/success @hideloading', '@(Credentials have been changed successfully)');
				hide();
			});
		};

	});

</script>